<template>
	<view class="boxx">
		<!-- 页面头部 -->
		<div class="head">
			<!-- 返回按钮 -->
			<img src="../../static/img/fanhui.png" alt="" class="return_botton" @click="bc">
			<!-- 页面标题 -->
			<p class="title">我的公益积分</p>
		</div>
		<!-- 占位 -->
		<div class="mark_one"></div>
			<!-- 方框 -->
		<div class="lower">
			<p class="word">累计获得的公益积分</p>
			<!-- 积分数量 -->
			<p class="number">0</p>
			<img src="../../static/img/10.png" alt="" class="img">
			<p class="word_tow">以用 ：</p>
			<!-- 已用 -->
			<p class="spend_number">0</p>
			<p class="word_three">可用 ：</p>
			<!-- 可用 -->
			<p class="surplus_number">0</p>
		</div>
	</view>
</template>

<script>
	export default {
		methods: {
			bc () {
				uni.navigateBack({
					
				})
			}
		}
	}
</script>

<style scoped>
	
	/* 页面头部  */
	.head{
	    width: 100%;
	    height:270rpx;
	    /* 270 */
	    line-height: 76rpx;
	    /* 76 */
	    background-color:#FFDA44;
	    border-radius:  0rpx 0rpx 91rpx 91rpx;
	    /* 91 */
	    /* 高行高 76 */
	 
	}
	/* 返回按钮 */
	.return_botton{
	    float: left;
	    margin-top: 20rpx;   /* 20 */
		margin-left: 20rpx;
	    float: left;
	    width: 36rpx;   /* 36 */
	    height: 36rpx;/* 36 */
	
	}
	/* 页面标题 */
	.title{
	    float: left;
	    margin-left: 263rpx;    /* 236 */
	    font-size: 31rpx;   /* 31 */
	    font-weight: bold;
	    text-align: center;
	}
	.mark_one{
	    height: 18rpx;    /* 18 */
	}
	/* 方框 */
	.lower{
	    margin: 0 auto;
	    margin-top: -181rpx;
	    /* -181 */
	    width: 652rpx;
	    /* 652 */
	    height: 362rpx;
	    /* 362 */
	    background-color: white;
	    border-radius: 9rpx;
	    /* 9 */
	}
	.word{
	    float: left;
	    width: 652rpx;
	    /* 652 */
	    margin-top: 49rpx;
	    /* 49 */
	    text-align: center;
	    font-size: 25rpx;
	    /* 25 */
	    color: #A8A8A8;
	}
	/* 活跃度数量 */
	.number{
	    float: left;
	    width: 652rpx;
	    /* 652 */
	    text-align: center;
	    margin-top: 36rpx;
	    /* 36 */
	    font-size: 65rpx;
	    /* 65 */
	    font-weight: bold;
	}
	.img{
	    float: left;
	    margin-top: -72rpx;
	    /* -72 */
	    margin-left: 362rpx;
	    /* 362 */
	    width: 52rpx;
	    /* 52 */
	    height: 52rpx;
	    /* 52 */
	}
	
	.word_tow{
	    float: left;
	    margin-top:72rpx ;
	    /* 72 */
	    margin-left:54rpx ;
	    /* 54 */
	    font-size: 25rpx;
	    /* 25 */
	}
	/* 已用 */
	.spend_number{
	    float: left;
	    margin-top:62rpx ;
	    /* 72 */
	}
	.word_three{
	    float: left;
	    margin-top:72rpx ;
	    /* 72 */
	    margin-left:308rpx ;
	    /* 308 */
	    font-size: 25rpx;
	    /* 25 */
	}
	/* 可用 */
	.surplus_number{
	    float: left;
	    margin-top:62rpx ;
	    /* 72 */
	}
</style>
